<template>
	<view class="">
		<view class="collect">
			<view class="complaints_header">
				<view class="header_back" @click="navigateBack()">
					<text class="iconfont icon-Left"></text>
				</view>
				<view class="header_title">我的收藏</view>
				<view class="header_btn" @click="tapEdit">
					<text class="iconfont icon-jilu"></text>
					<text class="btn_text">{{editShow ? '退出编辑' : '编辑'}}</text>
				</view>
			</view>

			<view class="aa">
				<mescroll-uni :down="downOption" :up="upOption" :fixed="false" ref="mescrollRef" @init="mescrollInit"
					@down="downCallback" @up="upCallback">
					<view class="collect-list">
							<view class="list_item" v-for="item in rows" :key="item.id"  @click="tapSelect(item)">
								<view class="item_status" v-if="editShow" :class="{'active':item.current}"></view>
								<view class="item_box">
									<view class="item_head">
										<view class="head_uid">商品编号：{{item.uid}}</view>
										<view class="head_status">收藏时间：{{item.update_time}}</view>
									</view>
									<view class="item_content">
										<view class="content_image">
											<image :src="item.img" mode=""></image>
										</view>
										<view class="content_message">
											<view class="message_title">{{item.title}}</view>
											<view class="message_system">
												<view class="system_item">#{{item.game_name}}</view>
											</view>
											<view class="message_auto">
												
												<view class="auto_price">
													<text>￥</text>
													<text>{{item.price}}</text>
												</view>
											</view>
											
										</view>
									</view>
								</view>
								
								
						</view>
					</view>
				</mescroll-uni>
				<view class="collect-btns" v-if="editShow">
					<view class="btns-left" @click="tapAll">
						<view class="btns-status" :class="{'active':checkAll}"></view>
						<text class="btns-text">全选</text>
					</view>
					<view class="btns-btn" @click="deleteData">删除</view>
				</view>
			</view>

			<!-- 没有历史记录的时候 -->
			<!-- <u-empty style="margin-top: 100rpx;" mode="history" :icon="require('@/static/images/nosc.png')"
				text="您还没有收藏哦~" v-else>
			</u-empty> -->
		</view>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import { collection_list, set_collection } from '@/api/user'
	export default {
		data() {
			return {
				mescroll: null, //mescroll实例对象
				downOption: {
					auto: false, // 是否在初始化完毕之后自动执行下拉刷新的回调; 默认true
					textInOffset: '下拉刷新', // 下拉的距离在offset范围内的提示文本
					textOutOffset: '释放更新', // 下拉的距离大于offset范围的提示文本
					textLoading: '更新中 ...', // 加载中的提示文本
					offset: 40,
				},
				upOption: {
					auto: false, // 是否在初始化完毕之后自动执行上拉加载的回调; 默认true
					bgColor: "transparent", // 背景颜色 (建议在pages.json中再设置一下backgroundColorTop)
					textColor: "gray", // 文本颜色 (当bgColor配置了颜色,而textColor未配置时,则textColor会默认为白色)
					textLoading: '加载中 ...', // 加载中的提示文本
					textNoMore: '-- 没有更多数据了 --', // 没有更多数据的提示文本
					offset: 1,
					noMoreSize: 2,
					empty: {
						// icon: require('@/static/images/nosc.png'),
						icon: '',
						tip: '您还没有收藏账号哦~'
					},
					page: {
						num: 1,
						size: 10,
						time: null
					}
				},
				total: 0, //服务器数量
				localTotal: 0, //本地已经加载数量
				editShow: false, //是否编辑状态
				checkAll: false,
				page: 1,
				pageSize: 10,
				rows: []
			}
		},
		onLoad() {
			this.$nextTick(e => this.getProductCollectionList())
		},
		methods: {
			async getProductCollectionList() {
				let { data } = await collection_list({
					pageSize: this.pageSize,
					page: this.page,
				})


				if (this.page == 1) {
					this.rows = data.list
					this.mescroll.lockDownScroll(false)
					this.mescroll.lockUpScroll(false)
				} else {
					this.rows = [...this.rows, ...data.list]
				}
				if (this.loading) {
					this.$emit('update:loading', false)
				}
				this.total = data.page.total
				if (this.page == 1) {
					this.localTotal = data.list.length
				} else {
					this.localTotal += data.list.length
				}
				this.mescroll.endSuccess(data.list.length, this.localTotal < this.total)
			},
			// mescroll组件初始化的回调,可获取到mescroll对象 https://www.mescroll.com/uni.html#options
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
				//全部禁止执行
				this.mescroll.lockDownScroll(true)
				this.mescroll.lockUpScroll(true)
				this.mescroll.removeEmpty()
			},
			downCallback() {
				// this.mescroll.resetUpScroll()
				this.page = 1
				this.getProductCollectionList()
			},
			upCallback(page) {
				this.page += 1
				this.getProductCollectionList()
			},
			toBack() {
				uni.navigateBack({
					delta: 1
				});
			},
			// 点击编辑或退出编辑
			tapEdit() {
				this.editShow = !this.editShow;
				// 清空所有选择状态
				this.rows.forEach((item, index) => {
					if (item.current) rows.current = false
				});
				this.checkAll = false;
			},
			// 单条数据选择事件
			tapSelect(v) {
				if (this.editShow) {
					let data = this.rows;
					if (!this.editShow) return;
					// 改变单条数据状态
					data.forEach((item, index) => {
						if (item.id == v.id) {
							data[index].current = item.current ? false : true;
							this.rows = JSON.parse(JSON.stringify(data))
						}
					})
					// 监听是否全选
					let currentList = data.filter(item => item.current);
					this.checkAll = data.length == currentList.length ? true : false;
				} else {
					uni.navigateTo({
						url: '/pages/details/details?id=' + v.id
					})
				}
			},
			//全选反选
			tapAll() {
				let data = this.rows;
				data.forEach((item, index) => {
					data[index].current = !this.checkAll;
				});
				this.checkAll = !this.checkAll;
			},
			//删除数据
			async deleteData() {
				let data = this.rows.filter(item => item.current);
				if (data.length == 0) {
					return uni.showToast({
						title: '请至少选择一项!',
						icon: 'none'
					})
				}

				for (let item of data) {
					await this.set_collection(item.goods_id)
				}
				this.editShow = false
				this.$refs.uToast.show({
					type: 'success',
					message: "操作成功!",
				});
				this.page = 1
				this.pageSize = 10
				this.mescroll.triggerDownScroll()
			},
			set_collection(id) {
				return new Promise(async (resolve, reject) => {
					let data = await set_collection({
						id,
						status: false
					})
					resolve(true)
				})
			}
		}
	}
</script>
<style>
	page {
		background: #F7F8FA;
	}
</style>

<style scoped lang="scss">
	@import './collect.scss';
	.complaints_header {
		display: flex;
		align-items: center;
		padding: 28rpx 32rpx;
		position: relative;
		background-color: #fff;
		.header_back {
			margin-left: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.header_title {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		.header_btn {
			margin-left: auto;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			color: #22150b;
			.iconfont {
				font-size: 40rpx;
			}
			.btn_text {
				margin-top: 4rpx;
				font-size: 24rpx;
			}
		}
	}
.list_item {
			background: #FFFFFF;
			border-radius: 20rpx;
			box-sizing: border-box;
			padding: 24rpx;
			margin-top: 24rpx;
			display: flex;
			align-items: center;
			.item_status {
				width: 42rpx;
				height: 42rpx;
				border: 1px solid #dcdcdc;
				border-radius: 50%;
				box-sizing: border-box;
				margin-right: 24rpx;
				overflow: hidden;
				&.active {
					border: none;
					border-radius: 50%;
					background: url(../../static/dui.png) no-repeat;
					background-size: 42rpx 42rpx;
				}
			}
			.item_box {
				flex: 1;
				.item_head {
					display: flex;
					align-items: center;
					.head_uid {
						font-size: 24rpx;
						color: #22150B;
					}
					.head_status {
						margin-left: auto;
						font-size: 24rpx;
						color: #22150B;
					}
				}
				.item_content {
					margin-top: 16rpx;
					display: flex;
					padding-bottom: 20rpx;
					.content_image {
						width: 160rpx;
						height: 164rpx;
						border-radius: 20rpx;
						overflow: hidden;
						background: #FFB72C;
						image {
							width: 100%;
							height: 100%;
						}
					}
					.content_message {
						margin-left: 16rpx;
						flex: 1;
						.message_title {
							font-size: 24rpx;
							line-height: 30rpx;
							color: #22150B;
							font-weight: bold;
							display: -webkit-box;
							-webkit-box-orient: vertical;
							-webkit-line-clamp: 2;
							overflow: hidden;
						}
						.message_system {
							margin-top: 8rpx;
							display: inline-block;
							.system_item {
								float: left;
								padding: 6rpx 16rpx;
								background: #FFFBEF;
								border-radius: 88rpx;
								display: flex;
								align-items: center;
								justify-content: center;
								font-size: 20rpx;
								color: #995C00;
								margin: 0 8rpx 8rpx 0;
							}
						}
						.message_auto {
							display: flex;
							align-items: center;
							.auto_icon {
								display: flex;
								align-items: center;
								.icon_one {
									margin-right: 8rpx;
									width: 152rpx;
									height: 40rpx;
									background: linear-gradient( 90deg, #FFF3C7 0%, #F79135 100%);
									border-radius: 88rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									image {
										width: 28rpx;
										height: 28rpx;
									}
									text {
										font-size: 20rpx;
										line-height: 20rpx;
										color: #2E2516;
										margin-left: 8rpx;
									}
								}
								.icon_two {
									width: 104rpx;
									height: 40rpx;
									background: linear-gradient( 90deg, #322F23 0%, #A1652E 100%);
									border-radius: 88rpx;
									display: flex;
									align-items: center;
									justify-content: center;
									image {
										width: 28rpx;
										height: 28rpx;
									}
									text {
										font-size: 20rpx;
										line-height: 20rpx;
										color: #FFFCE3;
										margin-left: 8rpx;
									}
								}
							}
							
							.auto_price {
								margin-left: auto;
								display: flex;
								align-items: flex-end;
								text {
									font-weight: bold;
									color: #FF2020;
									&:nth-child(1) {
										line-height: 24rpx;
										font-size: 24rpx;
									}
									&:nth-child(2) {
										line-height: 32rpx;
										font-size: 32rpx;
									}
								}
							}
						}
						
					}
				}
				.item_btn {
					padding-top: 28rpx;
					display: flex;
					align-items: center;
					.btn_down {
						font-size: 24rpx;
						color: #6C6C6C;
					}
					.btn_del {
						width: 160rpx;
						height: 52rpx;
						border-radius: 100rpx;
						border: 2rpx solid #D7D7D7;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #6C6C6C;
					}
					.btn_right {
						margin-left: auto;
						display: flex;
						align-items: center;
					}
					.btn_one {
						margin-left: 12rpx;
						width: 160rpx;
						height: 52rpx;
						background: #F3F3F3;
						border-radius: 100rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #22150B;
					}
					.btn_two {
						margin-left: 12rpx;
						width: 160rpx;
						height: 52rpx;
						background: #FDD637;
						border-radius: 100rpx;
						box-sizing: border-box;
						display: flex;
						align-items: center;
						justify-content: center;
						font-size: 24rpx;
						color: #22150B;
					}
				}
			}
			
		}
</style>
